@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

.sort{
   width:29%;
   margin:45px auto;
   // border:1px solid;
   span{
      cursor: pointer;
      margin-left:30px;
      font-size:20px;
      font-family: '宋体';
      background: rgb(252, 189, 201);
      color:white;
   }
}
main{
   width:99%;
   height:auto;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   // margin-top:70px;
   .div-box{
      width:25%;height:auto;
      margin-top:40px;
      transition: all 1s ease;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img{
         width:80%;height:auto;
         display:block;margin:0 auto;
      }
      div{
         width:99%;height:auto;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         p{
            span{
               color:red;
            }
         }
      }
      // img:hover{ transform: scale(1.01) ;transition: all 1s ease;}
     div>span{
         width:100%;
         color:rgb(131, 120, 21);
         font-size:16px;
      }
      a{
         font-size:12px;
         text-decoration: none;
         color:black;
         i{
            animation: move 0.5s infinite linear;
         }
      }
   }
   .div-box:hover{box-shadow: -2px 2px 10px;}
}
@keyframes move{
   from{
      color:black;
   }
   to{
      color:gray;
   }
}